<section class="oe_container">
	<div class="oe_row oe_spaced">
		<h2 class="oe_slogan">MuK Chatter</h2>
		<h3 class="oe_slogan mb-0">Adds options for the chatter</h3>
		<img src="logo.png" style="width: 150px;" class="mx-auto center-block">
		<h4 class="oe_slogan mt-0" style="font-size: 23px">MuK IT GmbH - www.mukit.at</h4>
		<div class="mb-4" style="text-align: center;">
			<span 
				class="btn btn-sm mb-2" 
				style="font-size:14px; font-weight:500; background-color:#243742; color:#fff; cursor:default;"
			>
				<i class="fa fa-check"></i> Community
			</span>
			<span 
				class="btn btn-sm mb-2" 
				style="font-size:14px; font-weight:500; background-color:#5D8DA8; color:#fff; cursor:default;"
			>
				<i class="fa fa-check mr-1"></i> Enterprise
			</span>
		</div>
		<div class="oe_demo oe_screenshot"
			style="max-width: 84%; margin: 16px 8%">
			<img src="screenshot.png">
		</div>
	</div>
</section>

<section class="oe_container">
	<div class="oe_row oe_spaced">
		<div class="text-justify" style="max-width: 84%; margin: 16px 8%;">
			<h3 class="oe_slogan">Overview</h3>
			<p class="oe_mt32">
		        This module improves the design of the chatter and adds a user preference
		        to set the position of the chatter in the form view. Each user can define in
		        their profile the display of the chatter. The options are to show the chatter
		        on the side or at the bottom.
			</p>
		</div>
	</div>
</section>

<section
	class="oe_container oe_dark d-flex justify-content-around align-items-lg-center flex-column flex-lg-row">
	<div class="d-flex flex-column m-3 ml-lg-4">
		<h3 class="oe_slogan mb-3 mt-3 text-left">
			<i class="fa fa-comments mr8"></i>Want more?
		</h3>
		<p>
			Are you having troubles with your Odoo integration? Or do you feel
			your system lacks of essential features? <br>If your answer is <b>YES</b>
			to one of the above questions, feel free to contact us at anytime
			with your inquiry. <br>We are looking forward to discuss your
			needs and plan the next steps with you. <br>
		</p>
	</div>
	<div
		class="oe_slogan d-flex flex-column ml-1 mr-1 ml-lg-4 mr-lg-4 flex-grow-1">
		<a class="btn btn-primary btn-lg m-1 mt-2"
			href="mailto:sale@mukit.at?subject=Request%20Quote%3A%20MuK%20Chatter"
			style="font-size: 1.2rem; position: relative; overflow: hidden;">
			<i class="fa fa-envelope mr-1"></i>REQUEST QUOTE
		</a>

	</div>
</section>

<section class="oe_container">
	<div class="oe_row oe_spaced">
		<h3 class="oe_slogan">Our Services</h3>
		<div class="d-flex justify-content-between">
			<div>
				<div>
					<div style="width: 75px; height: 75px; border-radius: 100%; margin: auto">
						<img src="/service_development.png" style="width: 100%; border-radius: 100%">
					</div>
					<h3 
						class="oe_slogan" 
						style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 5px; color: #000 !important; opacity: 1 !important; line-height: 17px"
					>
						Odoo <br>Development
					</h3>
				</div>
			</div>
			<div>
				<div>
					<div style="width: 75px; height: 75px; border-radius: 100%; margin: auto">
						<img src="/service_integration.png" style="width: 100%; border-radius: 100%">
					</div>
					<h3 
						class="oe_slogan" 
						style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 5px; color: #000 !important; opacity: 1 !important; line-height: 17px"
					>
						Odoo <br>Integration
					</h3>
				</div>
			</div>
			<div>
				<div>
					<div style="width: 75px; height: 75px; border-radius: 100%; margin: auto">
						<img src="/service_infrastructure.png" style="width: 100%; border-radius: 100%">
					</div>
					<h3 
						class="oe_slogan" 
						style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 5px; color: #000 !important; opacity: 1 !important; line-height: 17px"
					>
						Odoo <br>Infrastructure
					</h3>
				</div>
			</div>
			<div>
				<div>
					<div style="width: 75px; height: 75px; border-radius: 100%; margin: auto">
						<img src="/service_training.png" style="width: 100%; border-radius: 100%">
					</div>
					<h3 
						class="oe_slogan" 
						style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 5px; color: #000 !important; opacity: 1 !important; line-height: 17px"
					>
						Odoo <br>Training
					</h3>
				</div>
			</div>
			<div>
				<div>
					<div style="width: 75px; height: 75px; border-radius: 100%; margin: auto">
						<img src="/service_support.png" style="width: 100%; border-radius: 100%">
					</div>
					<h3 
						class="oe_slogan" 
						style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 5px; color: #000 !important; opacity: 1 !important; line-height: 17px"
					>
						Odoo <br>Support
					</h3>
				</div>
			</div>
		</div>
	</div>
</section>
